<template>
  <div>
    <div class="detail">
      <p class="flex-b">资料名称：{{ state.detail.ziliaomingcheng }}</p>
      <p>类型：{{ state.detail.leixing }}</p>
      <p>下载总量：{{ state.detail.xiazailiang }}</p>
      <p>点击量：{{ state.detail.yueduliang }}</p>
      <p>招标内容：</p>
      <div class="mt20" v-html="state.detail.ziliaoneirong"></div>
      <div class="download-box">
        <div
          class="item"
          v-for="(item, index) in state.detail.wenjianbao"
          :key="index"
        >
          <div class="pdf" v-if="item.wenjian.fileSuffix == 'pdf'">PDF</div>
          <div class="zip" v-if="item.wenjian.fileSuffix == 'zip'">ZIP</div>
          <div class="info">
            <div class="name">{{ item.wenjian.fileName }}</div>
            <div class="downloadCount">下载量： {{ item.xiazailiang }}</div>
          </div>
          <a
            class="download"
            @click="
              downloadFile(item.wenjian.filePath, item.wenjian.fileName)
            "
          >
            <img :src="download" alt="#" />
            <span>下载</span>
          </a>
        </div>
      </div>
      <p>状态：{{ state.detail?.shangjia?.code == 1 ? "上架" : "下架" }}</p>
      <div class="flex-c">
        <el-button type="primary" @click="toEdit">编辑</el-button>
        <el-button
          type="primary"
          style="margin-left: 50px"
          @click="$router.go(-1)"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDatabaseDetail } from "@/api/database";
import download from "@/assets/icon-download.png";
const route = useRoute();
const router = useRouter();
const state = reactive({
  detail: {},
  download,
});
const GetList = () => {
  GetDatabaseDetail({ id: route.query.id }).then((res) => {
    if (res.code === 4201) {
      state.detail = res.data;
    }
  });
};
const downloadFile = (url, fileName) => {
  const x = new window.XMLHttpRequest();
  x.open("GET", url, true);
  x.responseType = "blob";
  x.onload = () => {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    a.click();
  };
  x.send();
};
const toEdit = () => {
  router.push({
    path: `/ziliaoku/info`,
    query: {
      id: state.detail.id,
      type: "edit",
    },
  });
};
GetList();
</script>
<style lang="scss" scoped>
.detail {
  padding: 1px 30px 30px 30px;
  font-size: 16px;
  color: #000;
  p {
    margin-top: 30px;
  }
}
.download-box {
  margin-top: 20px;
  .item {
    margin-top: 10px;
    padding: 15px 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: flex;
    .pdf,
    .zip {
      width: 60px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 20px;
      font-weight: bold;
      background-color: #dfdfdf;
    }
    .info {
      margin-left: 10px;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      .downloadCount {
        color: #999;
        font-size: 14px;
      }
    }
    .download {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin: auto 0;
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>
